<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3背景</title>
    <link rel="stylesheet" href="public.css">
    <style>
        .bgimg1 {
            /* 多张背景图以第一个在上 */
            background-image: url(./images/like.png), url(./images/liulanqi2.png);
            background-position: right bottom, left top;
            background-repeat: repeat, no-repeat;
            background-size: 50%;
        }

        .bgimg2 {
           
            background-image:  url(./images/liulanqi2.png);
            background-origin: padding-box;
            background-repeat: no-repeat;

        }
       
    </style>
</head>

<body>
    <div class="all-center">
        <div style="text-align: center;">
            <p>多张背景图</p>
            <div class="border-box bgimg1"></div>
        </div>
        <div style="text-align: center;">
            <p>背景图</p>
            <div class="border-box bgimg2">Lorem ipsum dolor sit amlore Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis laborum mollitia, quia cumque recusandae consectetur quasi inventore modi explicabo. Id, unde nobis.</div>
        </div>
       
    </div>

</body>

</html>